<template>
	<view class="container">
		<view>
			<!-- 搜索框 -->
			<uni-search-bar cancelButton="none" :focus="true" placeholder="请输入歌手名称" v-model="searchValue"
				@confirm="search">
				<template v-slot:searchIcon>
					<uni-icons color="#00c273" size="18" type="search" />
				</template>
			</uni-search-bar>
		</view>
		<!-- 专辑列表：专辑列表数据不为空时显示 -->
		<view v-if="albumList.length>0">
			<uni-grid :column="2" :highlight="true" :showBorder="false">
				<uni-grid-item v-for="(album, index) in albumList" :key="index">
					<view class="grid-item-box" @click="goAlbumDetail(album.id,album.name)">
						<image :src="album.coverImage" mode="aspectFill"></image>
						<view class="grid-info">
							<text class="text">{{album.name}}</text>
							<text class="text">{{album.artist}}</text>
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<!-- 错误提示：专辑列表数据为空时显示 -->
		<view v-else style="text-align: center;font-weight: bold;">
			<text>暂无记录</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DiscoverTabPage",
		data() {
			return {
				albumList: [], // 用于存储专辑列表响应数据
				searchValue: "" // 搜索关键词
			};
		},
		methods: {
			// 获取专辑数据
			getAlbumList() {
				uni.request({
					url: 'https://apifoxmock.com/m1/5460619-0-default/getAlbumList',
					method: 'GET',
					success: (res) => {
						// console.log(res);
						if (res.statusCode === 200) {
							this.albumList = res.data.data;
							// console.log('获取专辑列表成功：', res.data);
						} else {
							console.error('获取专辑列表失败：', res.message || '未知错误');
						}
					},
					fail: (err) => {
						console.error('请求失败：', err);
					}
				});
			},

			// 搜索功能
			async search() {
				// 未输入搜索关键词
				if (!this.searchValue) {
					this.getAlbumList();
					return;
				}

				// 对搜索关键词进行 URL编码
				const encodedKeyword = encodeURIComponent(this.searchValue);

				// 将输入的关键字keyword作为参数补充到请求路径中
				try {
					const [error, res] = await uni.request({
						url: `https://apifoxmock.com/m1/5460619-0-default/getAlbumByKeyword?keyword=${encodedKeyword}`,
						method: 'GET'
					});

					if (error) {
						console.log(error);
						return;
					}

					console.log(res);
					if (res.data.statusCode === 200) {
						// 搜索成功，将搜索结果赋值给专辑列表数据albumList,
						// 从而重新渲染专辑列表
						this.albumList = res.data.data;
					} else if (res.data.statusCode === 400) {
						// 未找到符合结果的搜索数据，让专辑列表数据为空
						this.albumList = [];
					}
				} catch (err) {
					console.log(err);
				}
			},
			//跳转到专辑详情页面
			goAlbumDetail(albumId, albumName) {
				console.log('1111111')
				uni.navigateTo({
					url: `/pages/album_detail/album_detail?id=${albumId}&name=${albumName}`
				});
			},
		},
		created() {
			this.getAlbumList();
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.grid-item-box {
		position: relative;
		padding: 10rpx;
		width: 95%;
		height: 600rpx;

		// 专辑图片
		image {
			width: 98%;
			height: 100%;
			border-radius: 20rpx;
		}

		// 专辑信息
		.grid-info {
			position: absolute;
			width: 80%;
			bottom: 5%;
			left: 6%;
			background-color: #00c273;
			color: #fff;
			padding: 10rpx;
			border-radius: 10rpx;

			.text {
				font-weight: bold;
				text-align: center;
			}
		}
	}
</style>